<template>
	<view class="projectDetails ff-padding-bottom-15">
		<view class="projectDetails-header">
			<image class="projectDetails-header-bg"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/compang-details-bg.png"
				mode=""></image>
			<view class="projectDetails-header-content ff-bg-fff ff-border-radius-10">
				<view class="ff-font-16 ff-font-weight-600 ff-color-000">{{ projectDetailsInfo.projectName }}</view>
				<view class="ff-align-items-one ff-flex-wrap">
					<view class="ff-margin-right-10">
						<view v-if="projectDetailsInfo.status == 0" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已发布</view>
						<view v-if="projectDetailsInfo.status == 1" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已响应</view>
						<view v-if="projectDetailsInfo.status == 2" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已确认</view>
						<view v-if="projectDetailsInfo.status == 3" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;进行中</view>
						<view v-if="projectDetailsInfo.status == 4" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;已结束</view>
						<view v-if="projectDetailsInfo.status == 5" class="tips1 ff-font-12">项目状态&nbsp;|&nbsp;待批准</view>
						<view v-if="projectDetailsInfo.status == 6" class="tips5 ff-font-12">项目状态&nbsp;|&nbsp;已解约</view>
						<view v-if="projectDetailsInfo.status == 9" class="tips5 ff-font-12">项目状态&nbsp;|&nbsp;已作废</view>
					</view>
					<view v-if="projectDetailsInfo.status == 3" class="ff-margin-right-10">
						<view v-if="projectDetailsInfo.maintenances[0].status == 0" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待维保</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 1" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;维保中</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 2" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待审核</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 3" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待签发</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 5" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;已完成</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 6" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;已驳回</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 7" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待指派</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 8" class="tips2 ff-font-12">
							维保状态&nbsp;|&nbsp;待提交</view>
						<view v-if="projectDetailsInfo.maintenances[0].status == 9" class="tips5 ff-font-12">
							维保状态&nbsp;|&nbsp;已作废</view>
					</view>
					<view
						v-if="(projectDetailsInfo.status == 0 || projectDetailsInfo.status == 1) && projectDetailsInfo.responseNum > 0"
						class="tips3 ff-font-12 ff-margin-right-10">
						已有{{ projectDetailsInfo.responseNum }}家机构响应
					</view>
					<view v-if="projectDetailsInfo.rescissionStatus == 1"
						class="tips4 ff-color-fff ff-font-12 ff-margin-right-10">解约确认中</view>
					<view v-if="projectDetailsInfo.status == 3 && projectDetailsInfo.maintenceNum > 0"
						class="tips3 ff-font-12">
						正在进行第{{ projectDetailsInfo.maintenceNum }}次执业
					</view>
				</view>
				<view class="ff-font-13 projectDetails-header-content-address ff-color-555 ff-line-height-1-3">
					建筑物：{{ projectDetailsInfo.buildings[0].buildingName }} |
					距离您{{ projectDetailsInfo.nearest || '0' }}km
				</view>
				<view class="ff-font-13 projectDetails-header-content-time ff-color-555">
					更新于：{{ projectDetailsInfo.modified == null ? '/' : projectDetailsInfo.modified.substr(0, projectDetailsInfo.modified.length - 3) }}
				</view>
			</view>
			<view class="projectDetails-header-tabber ff-relative">
				<u-subsection inactive-color="#B5BBC8" @change="subsectionChange" active-color="#0B204B" bg-color="#fff"
					button-color="#F7F7F8" height="100" :list="subsectionList"
					:current="subsectionCurrent"></u-subsection>
				<image v-if="subsectionCurrent == 0" class="left-icon"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/details-san.png" mode="">
				</image>
				<image v-if="subsectionCurrent == 1" class="right-icon"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/details-san.png" mode="">
				</image>
				<u-badge class="uBadge" type="error" :count="responseNum"></u-badge>
			</view>
			<view class="line"></view>
		</view>
		<view class="projectDetails-content"
			:class="{ marTop1: projectDetailsInfo.buildings[0].buildingName.length > 10, marTop11: projectDetailsInfo.maintenances.length < 1 }">
			<view class="projectDetails-content-box">
				<project-details-content :projectDetailsInfo.sync="projectDetailsInfo"
					v-show="subsectionCurrent == 0" />
				<response-record :responseList.sync="responseList" @selectClick="selectClick"
					v-show="subsectionCurrent == 1" />
			</view>
		</view>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	import projectDetailsContent from './components/projectDetailsContent.vue';
	import responseRecord from './components/responseRecord.vue';
	export default {
		name: 'projectDetails',
		components: {
			projectDetailsContent,
			responseRecord
		},
		data() {
			return {
				locationModal: false, // 定位失败弹框显/隐
				subsectionList: [{
						name: '项目详情',
						icon: 'order'
					},
					{
						name: '响应记录',
						icon: 'file-text'
					}
				],
				subsectionCurrent: 0, // 导航栏坐标切换
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				// 获取项目详情页请求的参数
				params: {
					projectId: '',
					longitude: '',
					latitude: ''
				},
				projectDetailsInfo: {}, // 项目详情页数据
				responseList: [] // 响应记录列表数据
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			let that = this;
			that.params.projectId = e.id;
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getprojectDetails(); // 获取项目详情页数据
					that.getResponseList(); // 获取响应记录数据
				},
				fail() {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		computed: {
			responseNum() {
				return this.responseList.length;
			}
		},
		methods: {
			// 获取项目详情页数据
			async getprojectDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: '/project/user/detailV2',
					data: this.params
				});
				// console.log('获取项目详情页数据------', data);
				if (data.code == 200) {
					this.projectDetailsInfo = data.data;
					if (this.projectDetailsInfo.maintenanceTime) {
						this.projectDetailsInfo.maintenanceTime = this.projectDetailsInfo.maintenanceTime.substr(0,
							10);
					}
					if (this.projectDetailsInfo.maintenanceStartTime) {
						this.projectDetailsInfo.maintenanceStartTime = this.projectDetailsInfo.maintenanceStartTime
							.substr(0,
								10);
					}
					if (this.projectDetailsInfo.maintenanceEndTime) {
						this.projectDetailsInfo.maintenanceEndTime = this.projectDetailsInfo.maintenanceEndTime.substr(
							0,
							10);
					}

				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 获取响应记录数据
			async getResponseList() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: '/project/responseList',
					data: this.params
				});
				// console.log('获取响应记录数据------', data);
				if (data.code == 200) {
					this.responseList = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 选定该机构
			async selectClick(id) {
				this.$refs.loading.openLoading('提交中···');
				const data = await this.$http.get({
					url: `/project/confirmV2/${id}`
				});
				// console.log('我选定了该机构返回的数据-----', data)
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.responseList = [];
					this.getResponseList(); // 重新请求响应记录数据
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 顶部导航栏切换
			subsectionChange(e) {
				this.subsectionCurrent = e;
				if (e == 0) {
					let that = this;
					that.params.projectId = that.params.projectId;
					// 获取经纬度
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							// console.log('当前位置的经度-----：', res);
							that.params.latitude = res.latitude;
							that.params.longitude = res.longitude;
							that.getprojectDetails(); // 获取项目详情页数据
						},
						fail() {
							// console.log('位置定位失败返回----', error);
							that.locationModal = true;
						}
					});
					return;
				}
				if (e == 1) {
					let that = this;
					that.params.projectId = that.params.projectId;
					// 获取经纬度
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							// console.log('当前位置的经度-----：', res);
							that.params.latitude = res.latitude;
							that.params.longitude = res.longitude;
							that.getResponseList(); // 获取响应记录数据
						},
						fail() {
							// console.log('位置定位失败返回----', error);
							that.locationModal = true;
						}
					});
					return;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './components/projectDetails.scss';

	.projectDetails-header {
		padding-top: 30rpx;
		position: inherit !important;
	}

	.projectDetails-content {
		margin-top: 25rpx !important;
	}

	.projectDetails-header-content {
		margin: 0 24rpx 20rpx;
	}

	.marTop {
		margin-top: 500rpx;
	}



	.marTop1 {
		margin-top: 415rpx;
	}

	.uBadge {
		position: absolute;
		right: 11%;
		bottom: 100%;
	}
</style>